{% extends "../_base/layout.html" %} 
{% block css %}
<link rel="stylesheet" href="{{site.static}}/css/video_detail.css"> 
{% endblock %}

{% block js %}
<script src="{{site.static}}/js/video/videoDetail.js"></script> 
{% endblock %}

{% block content %} 
    {% block header%}
    {% set pageHeaderConf = {pageTitle:__("video_detail_page_title"),level:2} %} 
    {% include "../_base/page_header.html" %} 
    {% endblock %}
    
<div class="eui-main-container video-detail-main-container"> 
    <div class="eui-media eui--white-bacg main-video">
        <div class="eui-media-header eui--clearfix eui--position-rel">
            <span class="eui-icon eui-icon-play-btn"></span>                                 
            <img class="eui-media-img eui--width-100" src="{{site.cdn}}/test-banner.jpg">
        </div>                       
        <div class="eui-media-body eui--font-26 eui--position-rel eui--clearfix">
            <div class="eui-media-object eui--pull-left">   
                <p class="eui-media-object-body">我是视频名称，最多可显示两行最少显示一行。每30个字符，右侧留空，不填满，参考YouTube。</p>
                <div class="eui-media-object-footer eui--clearfix">
                    <div class="eui--pull-left">
                        <span class="eui-icon eui-icon-play-btn_sm"></span> 9999
                    </div>
                    <div class="eui--pull-right eui--949494-color">
                        <span class="eui-icon eui-icon-clock"></span> 08-26
                    </div>
                </div>
            </div>  
        </div>
        <div class="eui-media-footer eui--display-flex">
            <a href="javascript:;" class="eui--text-center icon-thumb-wrap active">
                <span class="eui-icon eui-icon-thumb"></span>
                <p>0</p>
            </a>
            <a href="javascript:;" class="btn-share eui--text-center icon-share-wrap">
                <span class="eui-icon eui-icon-share"></span>
                <p>{{__("btn_share")}}</p>
            </a>
            <a href="javascript:;" class="eui--text-center icon-collect-wrap active">
                <span class="eui-icon eui-icon-collect"></span>
                <p>{{__("btn_collect")}}</p>
            </a>
        </div>
    </div>    

    <div class="eui-card eui--white-bacg eui--margin-t-20">
        <div class="eui-card-header">
            {{__("video_detail_card_title")}}            
        </div>
        <div class="eui-card-content eui--margin-x-16">
            <ul class="eui-table-view video-list">
                <li class="eui-table-view-cell eui--clearfix eui--margin-b-20">
                    <div class="eui-media">
                        <div class="eui-media-header eui--pull-left">
                            <span class="eui-icon eui-icon-play-btn"></span> 
                            <img class="eui-media-img" src="{{site.cdn}}/test-banner.jpg">
                            <span class="video-time">04:30</span>
                        </div>                       
                        <div class="eui-media-body eui--pull-left eui--font-24 eui--position-rel eui--clearfix">
                            <div class="eui-media-object eui--width-100">   
                                <a href="/video/videoDetail" class="eui--black-color">
                                    <p class="eui-media-object-body">我是视频名称，最多可显示两行最少显示一行。每30。</p>
                                    <div class="eui-media-object-footer eui--clearfix eui--position-abs eui--width-100">
                                        <div class="eui--pull-left">
                                            <span class="eui-icon eui-icon-play-btn_sm"></span> 9999
                                        </div>
                                        <div class="eui--pull-right">
                                            <span class="eui-icon eui-icon-clock"></span> 08-26
                                        </div>
                                    </div>
                                </a>                                
                            </div>  
                            <span class="eui-icon eui-icon-dotted"></span>                                                                                                                                          
                        </div>
                    </div>                    
                </li>
                <li class="eui-table-view-cell eui--clearfix">
                    <div class="eui-media">
                        <div class="eui-media-header eui--pull-left">
                            <span class="eui-icon eui-icon-play-btn"></span> 
                            <img class="eui-media-img" src="{{site.cdn}}/test-banner.jpg">
                            <span class="video-time">04:30</span>
                        </div>                       
                        <div class="eui-media-body eui--pull-left eui--font-24 eui--position-rel eui--clearfix">
                            <div class="eui-media-object eui--width-100">   
                                <a href="/video/videoDetail" class="eui--black-color">
                                    <p class="eui-media-object-body">我是视频名称，最多可显示两行最少显示一行。每30。</p>
                                    <div class="eui-media-object-footer eui--clearfix eui--position-abs eui--width-100">
                                        <div class="eui--pull-left">
                                            <span class="eui-icon eui-icon-play-btn_sm"></span> 9999
                                        </div>
                                        <div class="eui--pull-right">
                                            <span class="eui-icon eui-icon-clock"></span> 08-26
                                        </div>
                                    </div>
                                </a>
                            </div>  
                            <span class="eui-icon eui-icon-dotted"></span>                                                                                                                                          
                        </div>
                    </div>                    
                </li>
            </ul>
        </div>
    </div>  

    {% block shareFooter%}
    {% include "../common/video_share_footer.html" %} 
    {% endblock %} 
</div>
{% endblock %}